<template>
  <div class="mains">
    <h2>注册小米帐号</h2>
    <p>系统会根据您选择的国家/地区的法律法规存储您的个人信息</p>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="+86"
        label-width=".5rem"
        placeholder="请输入手机号"
        :rules="[{ validator, required: true, message:msg }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        placeholder="请输入密码"
        :rules="[{ pattern: pass, required: true, message: '密码格式不正确' }]"
      />
      <van-field name="checkbox">
        <template #input>
          <van-checkbox
            v-model="checkbox"
            shape="square"
          />已阅读并同意小米帐号用户协议和隐私政策
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
    <router-link to="/login" class="login">登录帐号</router-link>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "regmain",
  data() {
    return {
      checkbox: false,
      username: "",
      password: "",
      pass: /^.{6,}$/,
      pattern: /^1\d{10}$/,
      msg:""
    };
  },
  methods: {
    onSubmit(values) {
      if (this.checkbox == false) {
        this.$notify({
          type: "warning",
          message: "请同意小米帐号用户协议和隐私政策",
        });
        // Notify({ type: 'warning', message: '请同意小米帐号用户协议和隐私政策' });
        return;
      }
      //   console.log("submit", values);
      axios({
        url: "/user/",
        method: "post",
        data: { username: values.username, password: values.password },
      }).then((res) => {
        console.log(res);
        if (res.data != null) {
          this.$notify({
            type: "success",
            message: "注册成功!",
          });
          this.$router.push("/login");
        } else {
          this.$notify({ type: "danger", message: "注册失败!" });
        }
      });
    },
    validator(val) {
      if (/1\d{10}/.test(val)) {
        return axios({
          url: "/user/",
          method: "get",
          params: { username: this.username},
        }).then((res) => {
          if (res.data.length > 0){
             this.msg = "手机号已存在!";
            return false
          }
          return true
        })
        
      } else {
        this.msg = "请填写正确的手机号!";
        return false;
      }
    },
  },
};
</script>
<style  scoped>
.login {
  text-align: center;
}
.mains {
  padding: 0rem 0.3rem;
}
h2 {
  color: #000;

  font-size: 0.23rem;
  margin-bottom: 0.1rem;
}
p {
  color: #0b84ff;
  font-size: 0.16rem;
}
</style>
<style>
.van-checkbox__icon--square .van-icon-success {
  border-radius: 50%;
  margin-right: 0.15rem;
  /* background-color: rgb(240, 240, 240); */
}
.van-field {
  margin-bottom: 0.2rem;
}
.van-field input {
  height: 0.6rem;
  font-size: 0.2rem;
  font-weight: 500;
}
.van-field__error-message {
  font-size: 0.18rem;
}
.van-field__label {
  display: flex;
  align-items: center;
  font-size: 0.18rem;
}
</style>

